<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../static/css/element.css">
    <title>frpc信息</title>
</head>
<body>
    <div id="app">
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu >
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>连接情况</template>
                        <el-menu-item index="1-1" @click="frpcConnInfo()" >frpc连接情况</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-setting"></i>模式设置</template>
                        <el-menu-item index="2-1" @click="modeInfo()">模式详情</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>

                <el-header style="text-align: center; font-size: 40px">
                    <span id="he_title" >FrpPlugin</span>
                </el-header>

                <el-main>
                    <!-- frpc客户端信息 -->
                    <el-table
                            v-show="showFrpc"
                            :data="frpcInfoData"
                            style="width: auto">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="run_id">
                                        <span>{{ props.row.run_id }}</span>
                                    </el-form-item>
                                    <el-form-item label="user">
                                        <span>{{ props.row.user }}</span>
                                    </el-form-item>
                                    <el-form-item label="status">
                                        <span>{{ props.row.status }}</span>
                                    </el-form-item>
                                    <el-form-item label="metas">
                                        <span v-for="(item,i) in props.row.metas ">{{i}} : {{item}} &nbsp;&nbsp;</span>
                                    </el-form-item>
                                    <el-form-item label="proxyInfo">
                                        <div v-for="(items) in props.row.proxyInfo ">
                                            <span v-for="(item,i,index) in items">
                                                <span v-if=" i != 'user' & item != ''  ">{{i}} = {{item}};&nbsp;&nbsp;&nbsp;</span>
                                            </span>
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="run_id"
                                prop="run_id">
                        </el-table-column>
                        <el-table-column
                                label="user"
                                prop="user">
                        </el-table-column>
                        <el-table-column
                                label="status"
                                prop="status">
                        </el-table-column>
                        <el-table-column
                                label="操作" >
                            <template slot-scope="scope">
                                <span v-if="scope.row.status == 'on'">
                                    <el-button @click="changeStatus(scope)" type="danger">下线</el-button>
                                </span>
                                <span v-if="scope.row.status == 'off'">
                                    <el-button @click="changeStatus(scope)" type="success">上线</el-button>
                                </span>
                            </template>
                        </el-table-column>

                    </el-table>

                    <!-- 配置 -->
                    <div v-show="showConf">
                        <el-row>
                            <el-col :span="24"><div class="grid-content bg-purple-dark">
                                <span>当前模式：</span>
                                <el-select v-model="modeValue" placeholder="请选择" @change="changeMode()" >
                                    <el-option
                                            v-for="item in options"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>&nbsp;
                                <el-tooltip class="item" effect="dark" placement="top">
                                    <span slot="content">
                                    开放模式允许任何ip连接,<br/>白名单模式只允许白名单上的ip连接,<br/>黑名单模式禁止黑名单上的ip连接<br/>可匹配单个ip，也可匹配ip范围如：127.0.0.1-127.0.0.10
                                    </span>
                                    <i class="el-icon-warning"></i>
                                </el-tooltip> &nbsp;
                                <el-button type="primary" id="addIpBtn" v-if="modeValue != 'no'"  @click="dialogVisible = true"> 添 加 IP</el-button>
                            </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24"><div class="grid-content bg-purple-dark">
                                <!--白名单IP-->
                                <div style=" margin-left: 115px ;text-align: center;width: 1000px;">
                                    <div v-show="allowIp.length > 0" ><h3 class="tableTitle">白 名 单</h3>
                                    <el-table :data="allowIp" >
                                        <el-table-column
                                                label="编号"
                                                type="index"
                                                width="150">
                                        </el-table-column>

                                         <el-table-column
                                                 label="IP"
                                                 prop="ip">
                                         </el-table-column>


                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                 <el-button
                                                        size="mini"
                                                        type="danger"
                                                        @click="handleDelete('allow', scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                    <div v-show="blockIp.length > 0"><h3 class="tableTitle">黑 名 单</h3>
                                    <el-table :data="blockIp"
                                              style="width: 100%" >
                                        <el-table-column
                                                label="编号"
                                                type="index"
                                                width="150">
                                        </el-table-column>

                                        <el-table-column
                                                label="IP"
                                                prop="ip">
                                        </el-table-column>


                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button
                                                        size="mini"
                                                        type="danger"
                                                        @click="handleDelete('block', scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                </div>
                            </div></el-col>
                        </el-row>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <!-- 新增ip 弹框 -->
        <el-dialog
                :visible.sync="dialogVisible"
                width="30%"
                @open="open()">
            <span slot="title" >{{iptitle}}</span>
            <el-input
                    placeholder="请输入ip"
                    v-model="ipValue"
                    clearable>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addIp">添加</el-button>
            </span>
        </el-dialog>
    </div>

</body>
<style>

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .tableTitle{
        height: 20px;
        text-align: center;
    }
    .item {
        margin: 4px;
    }
    .top {
        text-align: center;
    }
</style>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/vue.min.js"></script>
<script type="text/javascript" src="../static/js/vue-resource.min.js"></script>
<script type="text/javascript" src="../static/js/element.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            frpcInfoData : [],
            statusDict: {
                'on':"上线",
                'off':"下线",
            },
            showFrpc: false,
            showConf: false,
            options: [{
                value: 'no',
                label: '开放模式'
            }, {
                value: 'allow',
                label: '白名单模式',
            }, {
                value: 'block',
                label: '黑名单模式',
            }],
            //模式控制
            modeValue: 'no',
            // ip
            ipValue: '',
            iptitle: "ip",
            allowIp: [],
            blockIp: [],
            // tipContent: "开放模式允许任何ip连接,<br/> 白名单模式只允许白名单上的ip连接<br/> 黑名单模式禁止黑名单上的ip连接"

        },
        created() {
            //this.frpcConnInfo()
        },
        methods: {
            //获取frpc连接信息
            frpcConnInfo :function(){
                debugger
                $("#he_title")[0].innerText = "frpc连接情况";
                this.showFrpc=true;
                this.showConf=false;
                //发送get请求
                this.$http.get('/getFrpcMap').then(function(res){
                    //遍历
                    this.frpcInfoData = [] ;
                    for (let mealName of Object.values(res.body)) {
                        console.log(mealName);
                        this.frpcInfoData.push(mealName)
                    }
                },function(){
                    this.$message.error("数据获取失败")
                });
            },
            //修改状态（下线）
            changeStatus:function(scope){
                let status = scope.row.status;
                status = status==='on'? "off":'on';
                let warnInfo = status==='off'?"下线后会丢失代理信息,3分钟不上线会清除frpc信息,需重启frpc后恢复":'';
                if(confirm("是否"+ this.statusDict[status] +"该客户端？" + warnInfo)) {
                    var run_id = scope.row["run_id"];
                    //发送请求，修改状态
                    this.$http.get('/changeStatus/' + run_id + '/' + status).then(function (res) {
                        this.$message.success(res.bodyText);
                        this.frpcConnInfo();
                    }, function () {
                        console.log('请求失败处理');
                    });
                }
            },

            //获取配置信息
            modeInfo:function(){
                $("#he_title")[0].innerText = "模式详情";
                this.showFrpc=false;
                this.showConf=true;
                //获取配置
                this.getFrpcConf();
            },

            //打开前设置标题
            open :function () {
                this.iptitle = this.modeValue === 'allow'?"新增白名单IP":"新增黑名单IP"
                this.ipValue = "";
            },
            //添加Ip
            addIp:function () {
                //单个IP
                const pattern = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
                //范围匹配
                const rangepattern = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}-((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;

                //发送get请求
                if (this.ipValue && (pattern.test(this.ipValue) || rangepattern.test(this.ipValue) ) ){
                    this.$http.get('/addIp/'+ this.ipValue).then(function(res){
                        if(res.bodyText === 'success'){
                            this.$message.success("IP添加成功！！")
                        }else{
                            this.$message.error("IP添加失败！！")
                        }
                        this.dialogVisible = false;
                        this.getFrpcConf();
                    },function(){
                        this.$message.error("IP添加失败")
                    });

                }else{
                    this.$message.error("ip为空或格式错误！")
                }
            },

            //修改模式
            changeMode: function () {
                console.log(this.modeValue)
                //发送get请求
                this.$http.get('/setMode/'+ this.modeValue).then(function(res){
                    if(res.bodyText === 'success'){
                        this.$message.success("当前模式已变更")
                    }else{
                        this.$message.error("模式变更失败")
                    }
                    this.dialogVisible = false;
                    this.getFrpcConf();
                },function(){
                    this.$message.error("模式变更失败")
                });

            },
            //获取配置信息
            getFrpcConf: function(){
                this.$http.get('/getConf').then(function(res){
                    console.log(res);
                    this.allowIp = [];
                    this.blockIp = [];
                    this.modeValue = res.body.mode;
                    if (this.modeValue !== 'allow'){
                        this.setIpList(this.blockIp, res.body.block);
                    }

                    if (this.modeValue !== 'block'){
                        this.setIpList( this.allowIp,res.body.allow);

                    }
                },function(){
                    this.$message.error("配置获取失败")
                });
            },
            //删除IP
            handleDelete(mode, row) {
                console.log(mode, row);
                if (confirm("确认删除？")) {
                    this.$http.get('/delConfIp/'+ mode +"/"+ row.ip).then(function (res) {
                        if (res.bodyText === 'success') {
                            this.$message.success("已删除")
                        } else {
                            this.$message.error("删除失败")
                        }
                        this.getFrpcConf();

                    },function(){
                        this.$message.error("删除失败")
                    })
                }
            },
            //填充数据
            setIpList: function (target,source) {
                $.each(source,function (i,item) {
                    target.push({"ip":item})
                });
            }

        }
    })



</script>
</html>
